<template>
  <c-dialog ref="dialog" :data="selData" single title="任务处理" @closed="closedHandle">
    <c-list ref="form" :model="formData" :rules="formRules" label-width="100px" :data="datas">
      <c-list-item label="装修任务号" :value="detail.decorationTaskCode" />
      <c-list-item label="所属门店" :value="detail.shopName" />
      <c-list-item prop="expectDecorationTime" label="预计进场时间">
        <el-date-picker
          v-model="formData.expectDecorationTime"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期"
          clearable
        />
      </c-list-item>
      <c-list-item prop="expectEndTime" label="预计完工时间">
        <el-date-picker
          v-model="formData.expectEndTime"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期"
          clearable
        />
      </c-list-item>
      <c-list-item>
        <div class="btn-container">
          <c-button @click="cancelHandle">取消</c-button>
          <c-button type="primary" @click="confirmHandle">确认</c-button>
        </div>
      </c-list-item>
    </c-list>
  </c-dialog>
</template>
<script>
import { postDealPro } from '@/api/decorate'
export default {
  name: 'HandleTask',
  props: {
    selData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    const validatorTime = (r, v, c) => {
      const dt = new Date(this.formData.expectDecorationTime).getTime()
      const et = new Date(this.formData.expectEndTime).getTime()
      if (dt <= et) {
        c()
      } else {
        c(new Error('预计进场时间应小于预计完工时间'))
      }
    }
    return {
      formData: {
        expectDecorationTime: '',
        expectEndTime: ''
      },
      formRules: {
        expectDecorationTime: [{ required: true, message: '请选择预计进场时间', trigger: 'change' }],
        expectEndTime: [
          { required: true, message: '请选择预计完工时间', trigger: 'change' },
          { validator: validatorTime, trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    detail() {
      if (this.selData.length > 0) {
        return this.selData[0]
      } else {
        return {}
      }
    }
  },
  methods: {
    confirmHandle() {
      return this.$refs.form.validate().then(() => {
        const data = {}
        data.expectDecorationTime = this.formData.expectDecorationTime
        data.expectEndTime = this.formData.expectEndTime
        data.id = this.selData[0].id
        return postDealPro(data).then(res => {
          this.$message.success('操作成功！')
          this.$refs.dialog.visible = false
          this.$emit('on-success')
        })
      })
    },
    cancelHandle() {
      this.$refs.dialog.visible = false
    },
    closedHandle() {
      this.$refs.form.resetFields()
    }
  }
}
</script>
